<template>
  <a-card title="个人中心" bordered>
    <a-tabs default-active-key="1">
      <!-- 基本信息 -->
      <a-tab-pane key="1" tab="基本信息">
        <a-form
          :model="form"
          layout="vertical"
          class="max-w-xl"
        >
          <a-form-item label="头像">
            <a-upload
              list-type="picture-card"
              :show-upload-list="false"
              :before-upload="() => false"
              @change="handleAvatarChange"
            >
              <img v-if="form.avatar" :src="form.avatar" alt="avatar" style="width:100px;height:100px;border-radius:50%;" />
              <div v-else>
                <plus-outlined />
                <div style="margin-top:8px">上传头像</div>
              </div>
            </a-upload>
          </a-form-item>

          <a-form-item label="用户名">
            <a-input v-model:value="form.username" disabled />
          </a-form-item>

          <a-form-item label="邮箱">
            <a-input v-model:value="form.email" />
          </a-form-item>

          <a-form-item label="手机号">
            <a-input v-model:value="form.phone" />
          </a-form-item>
        </a-form>
      </a-tab-pane>

      <!-- 账户安全 -->
      <a-tab-pane key="2" tab="账户安全">
        <a-descriptions bordered column="1">
          <a-descriptions-item label="账户密码">
            已设置 <a-button type="link" @click="onChangePassword">修改</a-button>
          </a-descriptions-item>
          <a-descriptions-item label="两步验证">
            未启用 <a-switch v-model:checked="form.twoFactor" />
          </a-descriptions-item>
        </a-descriptions>
      </a-tab-pane>

      <!-- 偏好设置 -->
      <a-tab-pane key="3" tab="偏好设置">
        <a-form layout="vertical">
          <a-form-item label="界面语言">
            <a-select v-model:value="form.language">
              <a-select-option value="zh-CN">中文</a-select-option>
              <a-select-option value="en-US">English</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="主题模式">
            <a-radio-group v-model:value="form.theme">
              <a-radio value="light">浅色</a-radio>
              <a-radio value="dark">深色</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-form>
      </a-tab-pane>
    </a-tabs>

    <!-- 底部操作按钮 -->
    <div style="margin-top:20px; text-align:right;">
      <a-space>
        <a-button @click="onReset">重置</a-button>
        <a-button type="primary" @click="onSave">保存</a-button>
      </a-space>
    </div>
  </a-card>
</template>

<script setup>
import { ref } from 'vue'
import { PlusOutlined } from '@ant-design/icons-vue'

const form = ref({
  avatar: '',
  username: 'admin',
  email: 'admin@example.com',
  phone: '13800000000',
  twoFactor: false,
  language: 'zh-CN',
  theme: 'light'
})

const handleAvatarChange = (info) => {
  const file = info.file.originFileObj
  if (file) {
    const reader = new FileReader()
    reader.onload = e => { form.value.avatar = e.target.result }
    reader.readAsDataURL(file)
  }
}

const onSave = () => {
  console.log('保存数据', form.value)
}

const onReset = () => {
  console.log('重置表单')
}

const onChangePassword = () => {
  console.log('修改密码逻辑')
}
</script>
